<template>
    <div class="box">
        <div class="logo">
            <div class="ai">
                <img width="40px"
                    src="https://hdc-res-2023-1317708264.cos.ap-guangzhou.myqcloud.com/login_swiper%2Fxf.png"
                    alt="AI" />
                <span class="text">讯飞星火</span>
            </div>

            <img style="margin-right: 10px;" width="70px"
                src="https://hdc-res-2023-1317708264.cos.ap-guangzhou.myqcloud.com/logo%2Flogo.png" alt="">

            <img width="40px"
                src="https://hdc-res-2023-1317708264.cos.ap-guangzhou.myqcloud.com/login_swiper%2Faislogo.png"
                alt="AI" />
        </div>

        <div style="display: flex; justify-content: center; align-items: center; padding: 10px;">
            <img v-if="useTab.theme === 'auto'" style="border-radius: 10px; border: 1px solid #e0e0e0;" height="450px"
                src="https://hdc-res-2023-1317708264.cos.ap-guangzhou.myqcloud.com/login_swiper%2Flightai.png" alt="">
            <img v-else style="border-radius: 10px; border: 1px solid #e0e0e0;" height="450px"
                src="https://hdc-res-2023-1317708264.cos.ap-guangzhou.myqcloud.com/login_swiper%2Fdarkai.png" alt="">
        </div>

    </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { useTabStore } from '@/store/useTabStore';

const useTab = useTabStore();
onMounted(() => {
    const theme = localStorage.getItem('vueuse-color-scheme') as string

    useTab.setTheme(theme)
})


</script>

<style scoped lang="scss">
.box {
    border-top: 1px solid #e0e0e0;
    width: 100%;
    height: 600px;


    .logo {
        display: flex;
        align-items: center;
        padding: 10px;

        .ai {
            display: flex;
            align-items: center;
            margin-right: 10px;

            .text {
                background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent;
                font-weight: bold;
                font-size: 18px;
                letter-spacing: 1px;
            }
        }

    }




}
</style>